<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>京东登陆页</title>
        <style type="text/css">
            *{
                margin:0;
                padding:0;
            }
            img{
                vertical-align: middle;
            }
            .clearfix:after{
                display:table;
                content:"";
                clear:both;
            }
            .fl{
                float:left;
            }
            .fr{
                float:right;
            }
            a{
                color:#666;
                text-decoration:none;
            }
            .top a{
                color:#999;
            }
            a:hover{
                color:#f65868;
                text-decoration:underline;
            }
            .tip  a:hover{
                color:#333;
            }
            body{
                font-size:12px;
            }
            .top{
                margin:0 auto;
                padding:10px;
                width:990px;
            }
            .logo .pic2{
                margin-top:20px;
                margin-left:20px;
            }
            .exam{
                margin-top:42px;
                background:url("https://misc.360buyimg.com/user/passport/1.0.0/css/i/q-icon.png") no-repeat 2px 3px;
                padding-left:25px;
            }
            .tip{
                background:#fff8f0 url("https://misc.360buyimg.com/user/passport/1.0.0/widget/login-form-2016-1124/i/icon-tips.png") no-repeat 406px center;;
                width:100%;
                padding:10px 0 10px 0;
                text-align:center;
                color:#999;
            }
            .cnt_bg{
                background:#f65868;
                width:100%;
            }
            .cnt{
                width:990px;
                background:url("https://img13.360buyimg.com/da/jfs/t21742/117/190468209/161539/f69df9fc/5b02798cNead88af7.jpg") center no-repeat;
                margin:0 auto;
                height:475px;
            }
            .cnt .login_div{
                margin-top:10px;
                background:#fff;
                width:346px;
            }
            .cnt .login_div .jd_tip {
                background: #fff8f0;
            }
            .jd_tip p{
                color: #999;
                background:url("https://misc.360buyimg.com/user/passport/1.0.0/widget/login-form-2016-1124/i/icon-tips.png") no-repeat 34px center;
                height:18px;
                line-height:18px;
                padding:10px 10px 10px 54px;
            }
            .login_type{
                font-size:20px;
                color:#333;
                border-bottom:1px solid #eee;
            }
            .login_type>*{
                width:173px;
                height:54px;
                line-height:54px;
                text-align:center;
            }
            .login_type a{
                text-decoration:none;
            }
            .login_type a:hover{
                font-weight:700;
            }
            .form_div{
                border-bottom:1px solid #eee;
            }
            form{
                margin:30px 24px;

            }
            form a:hover{
                text-decoration: none;
            }

            .login_name input,.login_wrd input{
                width:258px;
                line-height:40px;
                height:40px;
                outline:none;
                font-size:14px;
                border:1px solid #ccc;
                padding-left:10px;
                border-left:none;
                box-sizing:border-box;
                margin-bottom:20px;

            }
            .login_name span{
                width: 38px;
                height: 38px;
                background:url("https://misc.360buyimg.com/user/passport/1.0.0/widget/login-form-2016-1124/i/pwd-icons-new.png") no-repeat 0 0;
                border:1px solid #ccc;
            }


            .login_wrd span{
                width: 38px;
                height: 38px;
                background:url("https://misc.360buyimg.com/user/passport/1.0.0/widget/login-form-2016-1124/i/pwd-icons-new.png") no-repeat -48px 0;
                border:1px solid #ccc;

            }
            .login_bth{
                width:302px;
                font-size:20px;
                color:#fff;
                background:#e4393c;
                border:1px solid #e85356;
                height:31px;
                line-height:31px;
                text-align:center;
                margin-top:40px;
            }
            .third_login  {
                width: 306px;
                height: 50px;
                line-height:50px;
                margin: 0 auto;
            }
            .third_login span{
                vertical-align:middle;
            }


            .qq_icon{
                width:19px;
                height:18px;
                display: inline-block;
                background:url("https://misc.360buyimg.com/user/passport/1.0.0/widget/login-form-2016-1124/i/QQ-weixin.png") no-repeat 0 0;
                margin-right:5px;
                vertical-align: middle;
            }
            .wechat_icon{
                width:19px;
                height:18px;
                display: inline-block;
                background:url("https://misc.360buyimg.com/user/passport/1.0.0/widget/login-form-2016-1124/i/QQ-weixin.png") no-repeat -20px 0;
                margin-right:5px;
            }
            .register_icon{
                width:16px;
                height:16px;
                display: inline-block;
                background:url("https://misc.360buyimg.com/user/passport/1.0.0/widget/login-form-2016-1124/i/pwd-icons-new.png") no-repeat -104px -75px;
                margin-right:5px;
            }
            .septalline{
                margin:2px 10px 0 10px;
                color:#ccc;
            }
            .register a{
                color:#b61d1d;
                font-size:14px;
            }
            .bot{
                width:990px;
                margin:20px auto;
                text-align:center;
            }
            .bot>*{
                margin-bottom:10px;
            }
            .bot a{
                margin:10px;
            }
            .bot p{
                color:#666;
            }
        </style>
    </head>
    <body>
        <div class="login_page">
            <!--页头开始-->
            <div class="top clearfix">
                <div class="logo fl">
                    <img class="pic1 fl" src="https://misc.360buyimg.com/lib/img/e/logo-201305-b.png"/>
                    <img class="pic2 fl" src="https://misc.360buyimg.com/user/passport/1.0.0/css/i/l-icon.png"/>
                </div>
                <div class="exam fr">
                    <a href="#">登录页面，调查问卷</a>
                </div>
            </div>
            <!--页头结束-->
            <!--登录提示开始-->
            <div class="tip">
                <p>依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证!新版<a href="#" class="privacypolicy" target="_blank">《京东隐私政策》</a>已上线，将更有利于保护您的个人隐私。</p>
            </div>
            <!--登录提示结束-->
            <!--登录主体开始-->
            <div class="cnt_bg">
                <div class="cnt clerfix">
                    <div class="login_div fr">
                        <div class="jd_tip">
                            <p>京东不会以任何理由要求您转帐汇款，谨防诈骗。</p>
                        </div>
                        <div class="login_type clearfix">
                            <div class="fl"><a href="#">扫码登录</a></div>
                            <div class="fl"><a href="#">账户登录</a></div>
                        </div>
                        <div class="form_div">
                            <form action="" method="post" class="clearfix">
                                <div class="login_name clearfix"><span class="fl"></span><input class="fl" placeholder="邮箱/用户名/已验证手机" name="username"></div>
                                <div class="login_wrd clearfix"><span class="fl"></span><input class="fl" type="password" name="password" placeholder="密码"></div>
                                <div class="forget fr"><a href="#">忘记密码</a></div>
                                <a href="#"><div class="login_bth">登&nbsp&nbsp&nbsp&nbsp录</div></a>
                            </form>
                        </div>
                        <div class="third_login clearfix">
                            <div class="fl"><a href="#"><span class="qq_icon"></span>QQ</a></div>
                            <div class="septalline fl">|</div>
                            <div class="fl"><a href="#"><span class="wechat_icon "></span>微信</a></div>
                            <div class="register fr"><a href="#"><span class="register_icon "></span>立即注册</a></div>
                        </div>
                    </div>
                </div>
            </div>
            <!--登录主体结束-->
            <!--登录尾部开始-->
            <div class="bot">
                <div>
                    <a href="#">关于我们</a>
                    <span>|</span>
                    <a href="#">联系我们</a>
                    <span>|</span>
                    <a href="#">人才招聘</a>
                    <span>|</span>
                    <a href="#">商家入驻</a>
                    <span>|</span>
                    <a href="#">广告服务</a>
                    <span>|</span>
                    <a href="#">手机京东</a>
                    <span>|</span>
                    <a href="#">友情链接</a>
                    <span>|</span>
                    <a href="#">销售联盟</a>
                    <span>|</span>
                    <a href="#">京东社区</a>
                    <span>|</span>
                    <a href="#">京东公益</a>
                    <span>|</span>
                    <a href="#">English Site</a>
                </div>
                <p>Copyright &copy; 2004-2018  京东JD.com 版权所有</p>
            </div>
            <!--登录尾部结束-->
        </div>
    </body>
</html>